<template>
  <!-- 预算收支情况折线图 -->
  <div class="budgetFlowLineChartPage">
    <div class="chartBox" id="cashFlowLineChartId"></div>
  </div>
</template>

<script setup>
import {ref, reactive, onUnmounted, shallowRef} from "vue";
import echarts from "@/common/utils/echarts.js";
import 'echarts/lib/component/dataZoom';

const cashFlowLineChartRef = shallowRef(null);


// 请求接口获取数据
/**
 * @param data 数据对象
 * @params data.data1 实际图数据
 * @params data.data2 计划图数据
 */
const legendTextStyle = {
  color: "#D3E3FF",
  fontWeight: "500",
  fontFamily: "SourceHanSansMedium",
}
const initChartOption = (data) => {
  // region 配置
  const options = reactive({
    color: ["#28A0E9", "#36E3E3"],
    tooltip: {
      trigger: "item",
      show: true,
      // confine: true,
      backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
      textStyle: {
        color: '#fff'
      },
      borderColor: "rgba(18, 57, 60, .8)",
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(0, 11, 34, .4)',
        }
      },
      formatter: (params) => {
        return `${params.name}
                <br/>
                ${params.seriesName}: ${params.value}万元`
      }
    },

    legend: [
      {
        top: '5%',
        left: '30%',
        data: [{
          name: '实际流入',
          icon: 'rect'
        }],
        itemWidth: 15,
        itemHeight: 15,
        textStyle: legendTextStyle
      },
      {
        top: '5%',
        left: '40%',
        data: [{
          name: '计划流入',
          icon: 'rect'
        }],
        itemWidth: 15,
        itemHeight: 5,
        textStyle: legendTextStyle
      },
      {
        top: '5%',
        left: '50%',
        data: [{
          name: '实际流出',
          icon: 'rect'
        }],
        itemWidth: 15,
        itemHeight: 15,
        textStyle: legendTextStyle
      },
      {
        top: '5%',
        left: '60%',
        data: [{
          name: '计划流出',
          icon: 'rect'
        }],
        itemWidth: 15,
        itemHeight: 5,
        textStyle: legendTextStyle
      }
    ],
    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisPointer: {
          type: "shadow"
        },
        nameTextStyle: {
          color: "#D3E3FF",
          fontWeight: "500",
          align: "right",
          verticalAlign: "bottom",
          lineHeight: -60,
        },
        // boundaryGap: false,
        data: data.xData,
        axisLabel: {
          color: "#D3E3FF",
        },
        axisTick: {
          // 去掉X轴刻度
          show: false,
        },
        axisLine: {
          // 不显示X轴线
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位(万元)",
        nameTextStyle: {
          color: "#D3E3FF",
          fontWeight: "500",
          align: "center",
        },
        // 横向分割线配置
        splitLine: {
          lineStyle: {
            type: [5, 10], // 虚线
            color: ["#B0D7FF"],
            opacity: 0.3,
          },
        },
        axisLabel: {
          color: "#D3E3FF",
        },
      },
    ],
    dataZoom: [{
      show: true,
      height: 12,
      bottom: '5%',
      start: 0,
      end: 20,
      textStyle: {
        color: "#fff"
      }
    }],
    series: [
      {
        name: "实际流入",
        type: "bar",
        barWidth: 40,
        data: data.data1,
      },
      {
        name: "实际流出",
        type: "bar",
        barWidth: 40,
        data: data.data2,
      },
      {
        name: "计划流入",
        type: "line",
        lineStyle: {
          // 设置线条颜色
          width: 3,
          color: "#28A0E9",
        },
        itemStyle: {
          // 设置线条上点的颜色
          color: "#28A0E9",
        },
        // showSymbol: false, // 不在折线上显示数据点
        // emphasis: {
        //   focus: "series",
        // },
        data: data.data3,
      },
      {
        name: "计划流出",
        type: "line",
        lineStyle: {
          // 设置线条颜色
          width: 3,
          color: "#36E3E3",
        },
        itemStyle: {
          // 设置线条上点的颜色
          color: "#36E3E3",
        },
        // showSymbol: false, // 不在折线上显示数据点
        // emphasis: {
        //   focus: "series",
        // },
        data: data.data4,
      },
    ],
  });
  // endregion
  cashFlowLineChartRef.value.setOption(options);
};

// 在父组件中调用
/**
 * @param data 配置项数据对象
 * @param data.xData X轴数据
 * @param data.data1 实际流入
 * @param data.data2 实际流出
 * @param data.data3 计划流入
 * @param data.data4 计划流出
 */
const initCashFlowLineChart = (data) => {
  // 基于准备好的dom，初始化echarts实例
  cashFlowLineChartRef.value = echarts.init(
      document.getElementById("cashFlowLineChartId")
  );

  initChartOption(data);
};

onUnmounted(() => {
  cashFlowLineChartRef.value.dispose()
})

defineExpose({
  initCashFlowLineChart,
});
</script>

<style lang="scss" scoped>
.budgetFlowLineChartPage {
  width: 100%;
  height: 100%;

  .chartBox {
    width: 100%;
    height: 100%;
  }
}
</style>
